<!-- 左侧模块 -->
<template>
    <div class="left-panel">
        <!-- 左侧工具条 -->
        <left-tool ref="left-tool" @onClick="toolItemClick"></left-tool>

        <!-- 左侧面板 -->
        <div class="left-panel-content" :class="data.expand ? 'show' : 'hide'">
            <div class="transition-box">
                <!-- 组件 -->
                <component-panel v-show="data.panelType === 1" class="panel" />
                <!-- 源码 -->
                <source-code-panel v-show="data.panelType === 2" class="panel" />
                <!-- 大纲 -->
                <outline-panel v-show="data.panelType === 3" :selectItem="selectItem"
                    @handleSetSelectItem="handleSetSelectItem" @resetSelectItem="resetSelectItem" class="panel" />
                <!-- 参数 -->
                <params-panel v-show="data.panelType === 4" class="panel" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive, defineProps } from 'vue'
import leftTool from './leftTool.vue';
import componentPanel from './component.vue';   // 组件
import sourceCodePanel from './sourceCode.vue'  // 源码
import outlinePanel from './outline.vue'        // 大纲
import paramsPanel from './params.vue'          // 参数
import { globalOptions } from '../../pageManager.js'

const emit = defineEmits(['handleSetSelectItem', 'handleResetSelectItem'])

const props = defineProps({
    selectItem: {
        type: Object
    }
})

// 数据
const data = reactive({
    panelType: 1,
    expand: true,
})

const created = () => {
    // console.log("componentList::", props.componentList)
}

created();

/**
 * @method
 * @desc 更新数据
 * @param {Object} data 数据
 */
const updateData = (data) => {
    props.generateData.data = data;
    // console.log("当前data:", data);
}

/**
 * @method
 * @param {Object} item 工具栏对象
 * @desc 工具栏点击事件
 */
const toolItemClick = (item) => {

    if (globalOptions.leftPanelFolding) {
        if (data.panelType == item.type) {
            data.expand = !data.expand;
        } else {
            if (!data.expand) {
                data.expand = true;
            }
        }
    }

    data.panelType = item.type;

}


/**
 * @method
 * @desc 选择组件
 * @param {Object} node 组件对象
 */
const handleSetSelectItem = (item) => {
    emit("handleSetSelectItem", item);
}


/**
 * @method
 * @desc 重置选中组件
 */
const resetSelectItem = () => {
    emit("handleResetSelectItem");
}

</script>

<style lang="less" scoped>
.left-panel {
    width: auto;
    height: 100%;
    border-right: 1px solid #dddddd;
    display: flex;

    .left-panel-content {
        // padding: 10px;
        // width: 250px;
        // width: 100%;
        height: 100%;
        overflow: auto;
        transition: width 0.3s;

        .transition-box {
            height: 100%;
            transition: all 0.1s;
            opacity: 1;

            .panel{
                height: 100%;
            }

        }

        &.show {
            width: 300px;
            .transition-box {
                opacity: 1;
            }
        }

        &.hide {
            width: 0;
            .transition-box {
                opacity: 0;
            }
        }
    }
}
</style>